<style>
  html{
    font-size: 20px;
  }
  body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  body,ul,h1,h2,h3,ul,li,p{
    margin: 0;
    padding: 0;

  }
  ul,li{
    list-style: none;
  }
  a{
    text-decoration: none;
  }
  a:hover{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  body{

    margin: 0 auto;
  }
  .content {
    width: 80%;
    margin:  0 auto;
  }
  .main_title_info p:first-child{
    float: left;
    line-height: 30px;
  }
  .main_title_info p:last-child{
    float: right;
    line-height: 30px;
    font-size: 12px;
    color: #ccc;
  }
  .main{
    clear: both;
  }
  .main .mian_left{
    width: 50%;
    float: left;
    background: #f3f3f3;

  }
  .main .mian_right{
    width: 50%;
    float: right;


  }
</style>
<template>
  <div class="content">
    <titles
      :text_length="text_length"
    >
      <textarea slot="t"
                class="text"
                placeholder="请将下列竖式计算补充完整"
                v-model="text_length"
      ></textarea>
    </titles>
    <div class="main_title_info">
      <p>设置</p>
      <p>在竖式中点击数字选项设置"待填空项"</p>
    </div>
    <div class="main">
      <div class="mian_left">
        <set_Calculation></set_Calculation>
      </div>
      <div class="mian_right">
        <div :is="isTemplate"></div>
      </div>
    </div>
  </div>
</template>

<script type="es6">
  import { mapState } from 'vuex'
  import titles from '../src/components/titles.vue'
  import set_Calculation from '../src/components/set_Calculation.vue'
  import add from '../src/components/add.vue'
  import reduce from '../src/components/reduce.vue'
  import ride from '../src/components/ride.vue'
  import except from '../src/components/except.vue'
  export default{
    data (){
      return {
        text_length: '',
      }
    },
    computed :mapState({
      isTemplate: state => state.modulesIndex.isTemplate,
    }),
    components: {
      titles,
      set_Calculation,
      add,
      reduce,
      ride,
      except
    },
    watch : {
      text_length (){
        if (this.text_length.length > 3000) {
          this.text_length = this.text_length.substring(0, 3000);
        }
      }
    },
    methods: {

    }
  }
</script>
